<template>
  <div class="demo">
    <div class="demo-title">三种大小</div>
    <div class="demo-content">
      <Radio.Group v-model:value="size">
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="middle">Middle</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <br />
      <br />
      <Space direction="vertical">
        <Select v-model:value="value1" :size="size" style="width: 200px" :options="options" />
        <Select
          v-model:value="value2"
          :options="options"
          mode="multiple"
          :size="size"
          placeholder="Please select"
          style="width: 200px"
          @popup-scroll="popupScroll"
        />
        <Select
          v-model:value="value3"
          :options="options"
          mode="tags"
          :size="size"
          placeholder="Please select"
          style="width: 200px"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Space from '@sscd/space';
  import Radio from '@sscd/radio';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const size = ref<SelectProps['size']>('middle');
  const value1 = ref('a1');
  const value2 = ref(['a1', 'b2']);
  const value3 = ref(['a1', 'b2']);
  const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }));
  const popupScroll = () => console.log('popupScroll');
</script>
